<template>
  <div class="all_header">
    {{ getWelcome() }}
    <div class="leftHeader">
      <div class="company">
        <h1><i class="el-icon-milk-tea"></i>&nbsp;智能奶茶</h1>
      </div>

    </div>

    <div class="rightHeader">
      <el-button class="toHome_btn" round @click="to('/home')">首页</el-button>
      <span class="personSpan">
        <p>{{ welcome }}&nbsp;&nbsp;&nbsp;{{name}}</p>
          <div @click="edit" class="personImg">
             <el-avatar :src="require('@/assets/yasuo.jpg')" class="headImg"></el-avatar>
          </div>
          <div class="personDo">
           <el-button type="info" size="mini" @click="logout" round>退出</el-button>
          </div>
      </span>

    </div>
    <el-dialog title="" :visible.sync="dialogVisible" width="200px">
      <span>
        <h2>&nbsp;&nbsp;&nbsp;&nbsp;面对疾风吧!</h2>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">确定</el-button>
        <el-button @click="dialogVisible=false">好的</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Header",
  data() {
    return {
      name:this.$route.query.name,
      welcome: '',
      dialogVisible: false
    }
  },
  methods: {
    getWelcome: function () {
      var hours = new Date().getHours();
      if (hours >= 6 && hours < 9) {
        this.welcome = '早上好!';
      } else if (hours >= 9 && hours < 12) {
        this.welcome = '上午好!';
      } else if (hours >= 12 && hours < 14) {
        this.welcome = '中午好!';
      } else if (hours >= 14 && hours < 18) {
        this.welcome = '下午好!';
      } else {
        this.welcome = '晚上好!';
      }
    },
    to: function (url) {
      if (this.$route.path !== url) {
        this.$router.push(url);
      }
    },
    edit: function () {
      this.dialogVisible = true;
    },
    logout: function () {

      var that = this;
      axios.delete("http://localhost:8081/logout").then(function (result) {
        that.$message({
          message: result.data.msg,
          center: true,
          type: "success"
        })
        that.to('/')
      })
    }
  }
}
</script>

<style scoped>

.all_header {
  height: 58px;
}

.leftHeader {
  background-color: #FFFFCC;
  height: 58px;
  width: 200px;
  float: left;
  text-align: center;
}

.company {
  margin-top: -7px;
  margin-left: -13px;
}

.rightHeader {
  height: 58px;
  background: #99CCCC;
}

.personSpan {
  left: 500px;
  float: right;
  width: 270px;
}

.personImg {
  float: left;
}

.personDo {
  margin-top: 15px;
  float: right;
  width: 65px;
}


.toHome_btn {
  margin: 10px 10px auto;
}

h1 {
  margin-top: 13px;
}

p {
  float: left;
}

.headImg {
  margin-top: 8px;
  margin-left: 25px;
}


</style>
